Optimizing typographic space with variable fonts 用可變字型最佳化排版空間

在響應式設計中，排版的最大挑戰之一就是空間的最佳化。我們希望在不同螢幕上，文字既能保持美觀，又能高效利用版面空間。

傳統方法 vs. 可變字型方法

在傳統的排版方式中，我們通常用 CSS 斷點（breakpoints） 來調整字型大小、行高、字距等。但問題是，這種方式的變化是“跳躍式” 的，當螢幕尺寸變化時，排版可能會突然改變，看起來很生硬。

可變字型則提供了一種更流暢的調整方式，讓字型的大小、字寬、行高等引數隨螢幕寬度平滑調整，視覺效果更加自然。

Width 字寬

傳統字型家族的寬度選擇有限且差異大，而可變字型能建立平滑的過渡變體。靜態字型的斷點佈局：字型寬度只能在單個斷點處改變。

可變字型的漸進式變化：藉助相對單位和可變字型的靈活性，所有變化都能平滑過渡。

過度調整字型寬度可能影響可讀性，抵消空間效率帶來的好處。

Line-filling 行列填充

說到字寬，可變字型的一大特點是可以讓不同長度的文字自動填充相同的空間。比如長文字可以自動壓縮，短文字可以自動擴充套件，這樣就能讓它們佔用相同的寬度，而不需要改變字號大小。

Extenders 延伸部分

字型的上延和下延部分（比如字母 h 的上部和 g 的下部）會影響行間距。這些延伸部分越長，為了避免文字重疊，需要的行間距就越大。

可變字型能自動調整延伸部分長度：在緊湊排版時縮短上下延伸，空間充足時恢復正常。這樣既能最佳化頁面空間利用，又能保持文字清晰度。